<template>
	<view class="select-more">
		<u-popup :show="show" @close="close" @open="open">
			<view class="title">{{title}}</view>
			<view class="list flex flex-wrap">
				<view class="item" v-for="(item, index) in list" :key="index" @tap="onChange(item)">
					<u-button :color="ids.indexOf(item.id) >= 0 ? '#FFD100' : '#aaa'" :plain="ids.indexOf(item.id) < 0">{{item.name}}</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "select-more",
		props: {
			title: '',
			show: false,
			list: Array
		},
		data() {
			return {
				ids: [],
				names: []
			};
		},
		methods: {
			close() {
				this.$emit('hide')
			},
			open() {

			},
			onChange(item) {
				const index = this.ids.indexOf(item.id)
				if (index >= 0) {
					this.ids.splice(index, 1)
					this.names.splice(index, 1)
				} else {
					this.ids.push(item.id)
					this.names.push(item.name)
				}
				this.$emit('change', {ids: this.ids, names: this.names})
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-more {
		position: fixed;
		z-index: 99999999999999;
		.title{
			padding: 20rpx;
			font-weight: 600;
			text-align: center;
			border-bottom: 1rpx solid #eee;
		}
		
		.list{
			padding: 20rpx;
			max-height: 60vh;
			overflow-y:scroll;
		}
		
		.item{
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}
</style>